﻿@{
Layout = null;
}

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户注册</title>
    <style>
        .error {
            color: red;
        }
    </style>
    <script src="~/Scripts/jquery-3.7.1.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script>
        function checkName() {
            var name = $('#input1').val();
            //location.href = "/Register/Check?name="+name;

            //异步请求
            jQuery.ajax({
                url: "/Register/AjaxCheck",//请求地址
                type: "post",//请求类型get或者post
                data: { "name": name },//请求数据
                success: function (backData) {//backData服务器返回的数据
                    $('#span1').text(backData);
                },//请求成功后执行的js代码
                error: function () {
                    $('#span1').text('服务升级中。。。');
                }//请求失败时执行的js代码
            });
        }

        // 身份证号验证   
        jQuery.validator.addMethod("sfzhyz", function (value, element, param) {
            var reg = new RegExp(param);
            return reg.test(value);
        }, "请正确填写您的身份证号");

        //页面加载完成
        $(function () {
            $('#input1').bind('blur', function () {
                var name = $('#input1').val();
                //异步请求
                jQuery.ajax({
                    url: "/Register/AjaxCheck",//请求地址
                    type: "post",//请求类型get或者post
                    data: { "name": name },//请求数据
                    success: function (backData) {//backData服务器返回的数据
                        $('#span1').text(backData);
                    },//请求成功后执行的js代码
                    error: function () {
                        $('#span1').text('服务升级中。。。');
                    }//请求失败时执行的js代码
                });
            });

            //使用jquery的验证
            $('#form1').validate({
                rules: {
                    name: { required: true, email: false },
                    sfzh: {
                        required: true,
                        sfzhyz: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                    },
                    pwd1: { required: true },
                    pwd2: {
                        required: true,
                        equalTo: "#input2"
                    },
                    age: {
                        required: true,
                        min: 1,
                        max: 120
                    }
                },
                messages: {
                    name: { required: "姓名不能为空！", email: "邮箱格式不正确！" },
                    sfzh: { required: "身份证号不能为空！" },
                    pwd1: { required: "密码不能为空！" },
                    pwd2: {
                        required: "确认密码不能为空！",
                        equalTo: "两次密码不一致！"
                    },
                    age: {
                        required: "年龄不能为空！",
                        min: "年龄不能小于1",
                        max: "年龄不能大于120"
                    }
                }
            });

            //自己写的验证
            // $('#form1').bind("submit", function () {
            //     var name = $('#input1').val();
            //     var pwd1 = $('#input2').val();
            //     var pwd2 = $('#input3').val();
            //     if (name == "") {
            //         $('#span1').text('姓名不能为空！');
            //         return false;
            //     } else {
            //         $('#span1').text('');
            //     }
            //     if (pwd1 == "") {
            //         $('#span2').text('密码不能为空！');
            //         return false;
            //     } else {
            //         $('#span2').text('');
            //     }
            //     if (pwd1 != pwd2) {
            //         $('#span3').text('两次密码不一致！');
            //         return false;
            //     } else {
            //         $('#span3').text('');
            //     }
            //     return true;
            // });
        });
    </script>
</head>

<body>
    <div>
        <h1>时间：@ViewBag.datetime</h1>
        <form id="form1" action="/Register/Add" method="post">
            <fieldset>
                <legend>用户注册</legend>
                <p>姓名：<input id="input1" type="text" name="name"><input type="button" value="验证"
                        onclick="checkName()" />@ViewBag.tip<span id="span1"></span></p>
                <p>身份证号：<input type="text" name="sfzh"></p>
                <p>年龄：<input type="number" name="age"></p>
                <p>密码：<input id="input2" type="text" name="pwd1"><span id="span2"></span></p>
                <p>确认密码：<input id="input3" type="text" name="pwd2"><span id="span3"></span></p>
                <p><input type="submit" value="提交"></p>
            </fieldset>
        </form>
    </div>
</body>

</html>